<template>
  <div class="left-nav">
    <el-row class="tac">
      <el-col :span="12">
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
          background-color="#10141a" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item style='color: white;' @click.native="allshow()" v-if="ischecked=='inventory'||ischecked=='soleing'">
            <i style="width: 45px;height: 2.8125rem; display: inline-block;"></i>
            <span slot="title">总览</span>
          </el-menu-item>
          <el-submenu v-for="(item,index) of icon" :key="index" :index=index.toString()>
            <template slot="title">
              <img :src=item.url alt="">
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="(item,index) of item.kind" :key="index" :index='"1-" +item'
                @click.native="getKind(item)">{{item}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    props:{
      ischecked:{
        default:''
      }
    },
    data() {
      return {
        icon: [{
            name: '手枪',
            url: require("../assets/icon/1.png"),
            kind: ['p2000', 'usp消音版', '格洛克18型', 'p250', 'FN57']
          },
          {
            name: '手套',
            url: require("../assets/icon/2.png"),
            kind: []
          },
          {
            name: '霰弹枪',
            url: require("../assets/icon/3.png"),
            kind: []
          },
          {
            name: '自动步枪',
            url: require("../assets/icon/4.png"),
            kind: ['AWP']
          },
          {
            name: '微型冲锋枪',
            url: require("../assets/icon/5.png"),
            kind: []
          },
          {
            name: '重型武器',
            url: require("../assets/icon/6.png"),
            kind: []
          },
          {
            name: '匕首',
            url: require("../assets/icon/7.png"),
            kind: []
          },
          {
            name: '印花',
            url: require("../assets/icon/8.png"),
            kind: []
          },
          {
            name: '探员',
            url: require("../assets/icon/9.png"),
            kind: []
          }
        ],
      }
    },
    methods: {
      //获取所有用户在售数据
      allshow() {
        this.axios.get(this.ischecked,{
          params:{
            uid:this.$store.state.uid
          }
        }).then(res=>{
          console.log(res.data)
          this.$store.commit(this.ischecked,res.data.result)
        })
      },
      //获取分类数据
      getKind(item) {
        console.log(item)
        console.log(this.ischecked)
        this.axios.get(this.ischecked, {
          params: {
            uid:this.$store.state.uid,
            kindName: item
          }
        }).then(res => {
          console.log(res.data)
          if(this.ischecked=='classification'){
            this.$store.commit('shop', res.data.data)
            console.log(this.$store.state.shop)
          }else if(this.ischecked=='inventory'){
             this.$store.commit('inventory', res.data.result)
             console.log(this.$store.state.inventory)
          }else{
            this.$store.commit('soleing', res.data.result)
            console.log(this.$store.state.soleing)
          }

        })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
  .left-nav {}

  .tac {
    width: 100%;
  }

  .el-col-12 {
    width: 100%;
  }

  .el-menu-vertical-demo {
    height: 44rem;
    overflow-y: auto;
  }

  /* 滚轮样式 */
  .el-menu-vertical-demo::-webkit-scrollbar {
    width: 5px;
    height: 1px;
  }

  .el-menu-vertical-demo::-webkit-scrollbar-thumb {
    /* //滑块部分 */
    border-radius: 5px;
    background-color: rgb(240, 240, 240);
  }

  .el-menu-vertical-demo::-webkit-scrollbar-track {
    /* //轨道部分 */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
    border-radius: 5px;

  }
</style>
